<template>
  <div :class="`${xvueNameSpace}`">
    <div v-loading="isLoading" class="config-panel">
      <div class="container" :class="xvueTheme">
        <el-tabs v-model="activeName">
          <el-tab-pane :label="$demoi18n('panel.tab.baseInfo')" name="zero">
            <!-- xvue注册的组件 -->
            <xvp-base-info
              ref="xVueBaseInfo"
              class="remote-control-button-unique"
              :is-hide-share-parameter="true"
              :widget-instance-id="widgetInstanceId"
              :is-exist-config="true"
              :is-hide-save-button="true"
            />
          </el-tab-pane>
          <el-tab-pane :label="propertyLabel" name="first">
            <panel-property
              ref="panel_property"
              class="remote-control-button-unique"
              :config="configClone"
              :widget-instance-id="widgetInstanceId"
              :widget="widget"
            />
          </el-tab-pane>
          <el-tab-pane :label="$demoi18n('panel.tab.data')" name="second">
            <panel-data
              ref="panel_data"
              class="remote-control-button-unique"
              :config="configClone"
              :widget-instance-id="widgetInstanceId"
              :dataSourceTypeOptions="isAurora ? auroraDataSourceTypeOptions_ : dataSourceTypeOptions_"
            />
          </el-tab-pane>
          <el-tab-pane class="remote-control-button-unique" :label="$demoi18n('panel.tab.linkage')" name="third">
            <panel-linkage ref="panel_linkage" :config="config" :widgetInstanceId="widgetInstanceId" :canEmitEvent="false" />
          </el-tab-pane>
        </el-tabs>
        <div class="save_box">
          <el-button type="primary" class="saveBtn remote-control-button-unique" @click.stop="saveAllData()">{{
            $demoi18n('panel.button.apply')
          }}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { auroraDataSourceTypeOptions, dataSourceTypeOptions } from '@/common/panel_config';
import PanelLinkage from '@/components/panel-linkage-new/panel-linkage';
import remoteBontrolBtnconfigPanelBase from '@/mixin/config-panel-base.js';
import config_ from './config';
import PanelData from './panel-data';
import PanelProperty from './panel-property';

export default {
  components: {
    PanelProperty,
    PanelData,
    PanelLinkage,
  },
  mixins: [remoteBontrolBtnconfigPanelBase],
  props: ['config', 'orgConfig', 'widgetInstanceId', 'widget'],
  data() {
    return {
      isLoading: false,
      activeName: window.isLocalEnv ? 'first' : 'zero',
      remoteBontrolButtonUnique: true,
      isAurora: this.$platformName === 'Aurora',
    };
  },
  computed: {
    configClone() {
      // 克隆一个config，用于在子组件中直接改变内部属性
      if (this.config) {
        return JSON.parse(JSON.stringify(this.config));
      }
      if (window.isLocalEnv) {
        let _config = config_;
        _config = JSON.parse(JSON.stringify(_config));
        return _config;
      }
      return {};
    },
    auroraDataSourceTypeOptions_() {
      const options = auroraDataSourceTypeOptions.filter(n => {
        return n.value !== 'xVueApi';
      });
      return options;
    },
    dataSourceTypeOptions_() {
      const options = dataSourceTypeOptions.filter(n => {
        return n.value !== 'xVueApi';
      });
      return options;
    },
  },
  methods: {},
};
</script>
<style lang="less" scoped>
// 配置面板通用样式，主要有明亮风格和蓝黑，样式名需一致
@import '../../common/less/config-panel.less';
</style>
